<template>
    <div class="dashboard-editor-container">
        <el-card shadow="never" class="border-none">
            <div slot="header">
                <el-row>
                    <el-col :span="8">
                        <el-button size="small" class="newadd"  type="primary" @click ="newUser(1)">增加用户</el-button>
                    </el-col>
                </el-row>
            </div>
            <!-- <el-col :span="3"> -->
                <!-- <el-card class="box-card"> -->
                    <!-- <el-tree :data="data" class="tree-line" icon-class="el-icon-circle-plus-outline" :indent="0"  :default-expand-all='true' :props="defaultProps" :expand-on-click-node='false' @node-click="handleNodeClick" :highlight-current='true'></el-tree> -->
                <!-- </el-card> -->
            <!-- </el-col> -->

            <!-- <el-col :span="20"> -->
                <!-- <div class="grid-content bg-purple-light"> -->
                    <el-table stripe border :data="tableData" highlight-current-row>
                        <el-table-column type="index" label="序号" width="80"></el-table-column>
                        <el-table-column prop="UserID"  label="用户名" width="100"></el-table-column>
                        <!-- <el-table-column prop="UserName" label="用户昵称" width="140"></el-table-column> -->
                        <el-table-column prop="UserRoleChinese" label="角色"></el-table-column>
                        <el-table-column prop="Mail" label="邮箱"></el-table-column>
                        <el-table-column prop="Department"  width="100" label="部门"></el-table-column>
                        <el-table-column prop="Phone" label="电话"></el-table-column>
                        <!-- <el-table-column prop="Phone" label="微信号"></el-table-column> -->
                        <el-table-column prop="Remark" label="描述"></el-table-column>
                        <!-- <el-table-column prop="Remark" :label="$t('table.remark')"></el-table-column> -->
                        <el-table-column prop="Status" label="状态">
                            <template slot-scope="scope">
                                <!-- :filters="[{ text: '初始状态', value: 0 }, { text: '在线', value: 1 }]" -->
                                <span  :type="scope.row.Status|getBindStatus" close-transition>{{scope.row.Status|getBindText}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="240">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="newUser(2,scope.row)" title="修改" type="primary" icon="el-icon-edit" circle></el-button>

                                <el-button size="mini" type="success" icon="el-icon-refresh-left" title="还原" circle="" @click="RevertToDefaultPwdClick(scope.row)"></el-button>
                                <el-button size="mini" type="primary" icon="el-icon-unlock" title="解锁" circle :disabled="scope.row.Status!=4" @click="UnlockSysUserClick(scope.row)"></el-button>
                                <el-button size="mini" type="danger" icon="el-icon-delete" title="删除" :disabled="scope.row.IsDefault===1 || scope.row.UserID === 'root'" circle @click="handleDelete(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                        <template slot="empty">
                            <div class="empty">
                                <svg-icon icon-class="notAvailable" class="notAvailable"></svg-icon>
                                <span>{{imgTitle}}</span>
                            </div>
                        </template>
                    </el-table>

                    <el-dialog v-el-drag-dialog :title="this.judgeTitle===1 ? '新增用户信息' : title" :visible.sync="centerDialogVisible" v-if="centerDialogVisible"  width="40%" @close='closeDialog'  :close-on-press-escape = false  :close-on-click-modal = false >
                        <!-- <span>这是一个dialog</span> -->
                        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="30%">
                            <!-- <el-card class="border-none margin-t24" shadow="never"> -->
                                <el-row :gutter="24">

                                    <el-col :sm="24" :md="24" :lg="24">
                                        <el-form-item  label="用户名" prop="UserID" >
                                            <el-input size="small" v-model="ruleForm.UserID" :disabled='jurisdiction' placeholder="请输入用户名"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <!-- <el-col :sm="24" :md="12" :lg="12">
                                        <el-form-item  :label="$t('table.userName')">
                                            <el-input size="small" v-model="ruleForm.UserName"></el-input>
                                        </el-form-item>
                                    </el-col> -->
                                    <el-col :sm="24" :md="24" :lg="24">
                                        <el-form-item  label="角色" prop="UserRole" >
                                            <el-select v-model="ruleForm.UserRole" size="small" style="width:60% !important" :disabled='roleDisable' placeholder="请选择角色">
                                                <el-option v-for="item in userList" :key='item.value' :value="item.value" :label="item.label"/>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="24" :md="24" :lg="24">
                                        <el-form-item  label="邮箱" prop="Mail">
                                            <el-input size="small" v-model="ruleForm.Mail" @blur="verifyEmail()" placeholder="请输入邮箱"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="24" :md="24" :lg="24">
                                        <el-form-item  label="部门">
                                            <el-input size="small" v-model="ruleForm.Department" placeholder="请输入部门"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="24" :md="24" :lg="24">
                                        <el-form-item  label="电话">
                                            <el-input size="small" v-model="ruleForm.Phone" placeholder="请输入电话"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <!-- <el-col :sm="24" :md="24" :lg="24">
                                        <el-form-item  :label="$t('table.wechat')">
                                            <el-input size="small" v-model="ruleForm.Wechat"></el-input>
                                        </el-form-item>
                                    </el-col> -->
                                    <el-col :sm="24" :md="24" :lg="24">
                                        <el-form-item  label="描述">
                                            <el-input size="small" v-model="ruleForm.Remark" type="textarea" placeholder="请输入描述"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            <!-- </el-card>      -->
                            <!-- <el-card>
                                <el-row :gutter="24">
                                    <el-col :sm="24" :md="24" :lg="24">
                                        <h3 class="text-header">{{$t('table.accessConfiguration')}}</h3>
                                    </el-col>
                                    <el-col :sm="24" :md="8" :lg="7">
                                        <el-form-item  :label="$t('table.policyStatus')" label-width="200px">
                                            <el-switch class="switch-class" :active-value="1" :inactive-value="0" v-model="ruleForm.PolicyStatus" :active-text="$t('table.yes')" :inactive-text="$t('table.no')"></el-switch>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="24" :md="8" :lg="10">
                                        <el-form-item  :label="$t('table.ukeyAuth')"  label-width="200px">
                                            <el-switch :disabled='this.ruleForm.PolicyStatus===0 || this.dontOpen' v-model="ruleForm.UkeyAuth" :active-value="1" :inactive-value="0" :active-text="$t('table.yes')" :inactive-text="$t('table.no')"></el-switch>
                                            <el-button size="small" class="ukey" type="primary" @click ='detection()'>检测ukey</el-button>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="24" :md="8" :lg="7">
                                        <el-form-item  :label="$t('table.singleLogin')">
                                            <el-switch  :disabled='this.ruleForm.PolicyStatus===0' :active-value="1" :inactive-value="0" v-model="ruleForm.SingleLogin" :active-text="$t('table.yes')" :inactive-text="$t('table.no')"></el-switch>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="24" :md="24" :lg="24">
                                        <el-form-item  :label="$t('table.loginWhiteList')">
                                            <div class="inputbox">
                                                <div class="arrbox">
                                                    <div v-for="(item,index) in labelarr" :key="index" class="spanbox">
                                                        <span>{{item}}</span>
                                                        <i class="spanclose" @click="removeitem(index,item)"></i>
                                                    </div>

                                                    <el-input  size="small" class="input" v-model="ruleForm.LoginWhiteList" :disabled="this.ruleForm.PolicyStatus===0" placeholder="请输入IP" @keyup.enter='((val)=>{changeStatus(val)})' @change="((val)=>{changeStatus(val)})" clearable />
                                                    <el-button size="small" @click="changeStatus()" type="primary">增加</el-button>
                                                </div>
                                            </div>

                                        </el-form-item>
                                    </el-col>

                                    <el-col :sm="24" :md="24" :lg="12">

                                        <el-form-item :label="$t('table.maxLoginTimes')">
                                            <el-input-number size="small" :disabled='this.ruleForm.PolicyStatus===0' v-model="ruleForm.MaxLoginTimes" :min="0"  @blur=" (e, name) => {LoginblurNumber(e, 'MaxLoginTimes'); } "></el-input-number> 次
                                            <p class="text-hint">* 次数为0代表不限制登录次数</p>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="24" :md="12" :lg="12">
                                        <el-form-item  :label="$t('table.logoutExpireTime')" prop="LogoutExpireTime" >
                                            <el-date-picker size="small" :disabled='this.ruleForm.PolicyStatus===0' v-model="ruleForm.LogoutExpireTime"  :picker-options="option"  type="datetime" placeholder="选择日期时间"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-card>    -->
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button size="small" v-if="this.showBotton === 1" type="primary" @click="determineClick('ruleForm',1)">确定</el-button>
                            <el-button size="small" v-if="this.showBotton === 2" type="primary" @click="determineClick('ruleForm',2)">保存</el-button>
                            <el-button size="small" @click="cancelClick('ruleForm')">取消</el-button>
                        </span>
                    </el-dialog>
                <!-- </div> -->
            <!-- </el-col> -->
        </el-card>
    </div>
</template>
<script>
import { MessageBox } from 'element-ui';
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import { cfunc } from '@/api/user';
import { connrequest } from '@/api/firstPage.js';
import { forEach } from 'jszip/lib/object';
export default {
    directives:{
        elDragDialog
    },
    props: {
        disabled:{
            type:Boolean
        },
        parentarr: {
            type: Array,
            default () {
                return [];
            }
        }
    },
    filters: {
        //tag类型
        getBindStatus(Status) {
            const bindColor = {
                0: 'info',
                1: 'success',
                2: 'info',
                4: 'danger',
                8: 'danger',
                16: 'danger',
                32:'danger'
            };
            return bindColor[Status];
        },
        //颜色名称
        getBindText(Status) {
            const bindColor= {
                0: '初始',
                1: '正常',
                2: '正常',
                4: '锁定',
                8: '密码过期',
                16: '超过最大登录次数',
                32: '达到登出时间'

            };
            return bindColor[Status];
        }
    },

    data () {
        let validateTime = (rule, value, callback) => {
            // console.log(value,Date.now());
            if (value > Date.now() ) {
                return callback();
                
            }else if (value===0 || value === '') {
                return callback();
            }
             else if(value ===undefined ||  value === null){
                return callback();
            }else {
                callback(new Error('选择时间必须大于当前时间'));
            }
        };
        let vaildateChinese = (rule, value, callback) =>{
            if (value) {
              if (/[\u4E00-\u9FA5]/g.test(value)) {
                callback(new Error('用户名不能包含中文'))
              } else {
                callback();
              }
            }
        }
        const checkEmail = (rule, value, callback) => {
            let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (emailReg.test(value) || value === '') {
                return callback();
            } else {
                callback(new Error("邮箱格式错误"));
            }
        };
        return {
            imgTitle:'',
            ipFlag: false,
            labelarr: [],
            option:{
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            judgeTitle:1,
            title:'修改用户信息',
            dontOpen:true,
            selectOption: [],
            jurisdiction:false,//disabled
            roleDisable:false,
            fatherDisabled:false,
            showBotton:1,//控制保存和确定按钮的显隐
            ruleForm:{  //表单参数
                UserID:'',
                UserName:'',
                UserRole:'',
                Mail:'',
                Department:'',
                Phone:'',
                Wechat:'',
                Remark:'',
                // LoginWhiteList:'',//登录白名单
                // PwdExpireTime:30, //密码自动过期时间
                // PwdRetryTimes:3,//密码重置次数
                // AutoUnlockTime:30,//账户锁定后自动解锁时长
                // MaxLoginTimes:0,//最多登录次数
                // UkeyAuth:0,
                PolicyStatus:1
                // SingleLogin:1
            },
            rules:{ //表单规则
                UserID:{ required: true, validator:vaildateChinese, trigger: 'blur' },
                // UserName: { required: true, message: '请输入用户昵称', trigger: 'blur' },
                UserRole:{ required: true, message: '请选择用户角色', trigger: 'change' },
                // Mail:{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
                LogoutExpireTime: [{ required: false, validator: validateTime, trigger: 'blur' }],
                Mail: [{ required: false, validator: checkEmail, trigger: "blur" }]
            },
            centerDialogVisible:false,//新增弹窗显隐控件
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            data: [{
                label: '全部',
                children:[]
            }],
            tableData: [],
            userList:[],
        };
    },
    created(){
        this.getData('');
        this.GetUIDictParam()
        // this.getUserTree();
    },
    watch:{
        // labelarr (old, cur) {
        //     console.log(old,cur);
        //     this.$emit('on-change', this.labelarr);
        // },
        parentarr () {
        if (this.parentarr.length > 0) {
            this.labelarr = [];
            for (let i = 0; i < this.parentarr.length; i++) {
            this.labelarr.push(this.parentarr[i]);
            }
        } else {
            this.labelarr = [];
        }
        }
        // ruleForm(){
        //     if (this.ruleForm.LogoutExpireTime===null || this.ruleForm.LogoutExpireTime===undefined) {
        //         this.ruleForm.LogoutExpireTime='';
        //     }
        // }
    },
    methods: {
        async GetUIDictParam(){
            this.userList = []
            const data = {
                Data : {
                    FilterType:'UserRole'
                }
            }
            const res = await connrequest('GetUIDictParam',data)
            res.Data.map(item=>{
                this.userList.push({
                    label:item.Descp,
                    value:item.Role
                })
            })
        },
        // 确认按钮
        determineClick(formName,status){
            // 新增
            if (status===1) {
                this.$refs[formName].validate(async(valid) => {
                    if (valid) {
                        const paramData = {
                            Header:{
                                CmdCode:"AddSysUser",
                                PageName: "UserMgt"
                            },
                            Data:{
                                UserID: this.ruleForm.UserID, //前台校验角色名不能为空不能重复
                                UserName: this.ruleForm.UserName, //前台校验父角色ID存在
                                UserRole: this.ruleForm.UserRole,
                                Mail: this.ruleForm.Mail,
                                Department:this.ruleForm.Department,
                                Phone:this.ruleForm.Phone,
                                Wechat:this.ruleForm.Wechat,
                                Remark:this.ruleForm.Remark,
                                // UkeyAuth:this.ruleForm.UkeyAuth,
                                // LoginWhiteList:this.labelarr.join(","),
                                // MaxLoginTimes:this.ruleForm.MaxLoginTimes,
                                // LogoutExpireTime:this.getDateSs(this.ruleForm.LogoutExpireTime),
                                // SingleLogin:this.ruleForm.SingleLogin,
                                PolicyStatus:this.ruleForm.PolicyStatus
                            },
                            Token:this.$store.state.user.Token
                        };

                        const res = await cfunc(paramData);
                        if (res.Status.StatusCode===0) {
                            this.getData();
                            this.$message.success("新增成功");
                            this.centerDialogVisible = false;
                            // console.log(res.Status.StatusCode);
                        }
                        // this.centerDialogVisible = false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            } else {
                // 保存
                // console.log(123123);
                this.$refs[formName].validate(async(valid) => {
                    if (valid) {
                        const paramData = {
                            Header:{
                                CmdCode:"ModifySysUser",
                                PageName: "ModifySysUser"
                            },
                            Data:{
                                UserID: this.ruleForm.UserID, //前台校验角色名不能为空不能重复
                                UserName: this.ruleForm.UserName, //前台校验父角色ID存在
                                UserRole: this.ruleForm.UserRole,
                                Mail: this.ruleForm.Mail,
                                Department:this.ruleForm.Department,
                                Phone:this.ruleForm.Phone,
                                Wechat:this.ruleForm.Wechat,
                                Remark:this.ruleForm.Remark,
                                // UkeyAuth:this.ruleForm.UkeyAuth,
                                // LoginWhiteList:this.labelarr.join(","),
                                // MaxLoginTimes:this.ruleForm.MaxLoginTimes,
                                // LogoutExpireTime:this.getDateSs(this.ruleForm.LogoutExpireTime),
                                // SingleLogin:this.ruleForm.SingleLogin,
                                PolicyStatus:this.ruleForm.PolicyStatus
                            },
                            Token:this.$store.state.user.Token
                        };
                        const res = await cfunc(paramData);
                        if (res.Status.StatusCode===0) {
                            // console.log(res.Status.StatusCod);
                            this.getData();
                            this.$message.success("保存成功");
                            this.centerDialogVisible = false;
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        //密码过期时间框清空后默认为30
        blurNumber(e, name) {
            if (!e.target.value) {
                this.ruleForm[name] = 30;
            }
        },
        //密码重试次数框清空后默认为3
        blurNumberTimes(e, name) {
            if (!e.target.value) {
                this.ruleForm[name] = 3;
            }
        },
        // 账户锁定后自动解锁时长清空后默认为30
        blurNumberUnlock(e, name) {
            if (!e.target.value) {
                this.ruleForm[name] = 30;
            }
        },
        // 最多登录次数清空后默认为30
        LoginblurNumber(e, name) {
            if (!e.target.value) {
                this.ruleForm[name] = 0;
            }
        },
        // 移除标签
        removeitem (index) {
            this.labelarr.splice(index, 1);
        },
        // ip判断
        changeStatus(val){
            let ipRegex = /^(?:(?:^|,)(?:[0-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(?:\.(?:[0-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3}){1,3}$/;
            // if (ipRegex.test(val) === false) {
            //     this.$message.error('输入IP格式有误，请重新输入！！！');
            //     this.ipFlag = false;
            // } else {
                let count = this.labelarr.indexOf(this.ruleForm.LoginWhiteList);
                if (count === -1) {
                    this.labelarr.push(this.ruleForm.LoginWhiteList);
                }
                // console.log(this.labelarr.join(","));
                // console.log(this.labelarr);
                this.ruleForm.LoginWhiteList = '';
                this.ipFlag = true;
            // }
        },
        //时间转换
        getDateStr(seconds){
            if (seconds===0) {
                return seconds;
            } else {
                var date = new Date(seconds*1000);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                var currentTime = year + "-" + month + "-" + day + "  " + hour + ":" + minute + ":" + second;
                return currentTime;
            }

        },
        //时间转换为S
        getDateSs(strtime){
            if (strtime==='') {
                return 0;
            } else {
                return Date.parse(strtime)/1000;
            }
        },
        //解锁时间转换
        getUnlockTime(seconds){
            var date = new Date((seconds+1800)*1000);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            var currentTime = year + "-" + month + "-" + day + "  " + hour + ":" + minute + ":" + second;
            return currentTime;
        },
        handleChange(value){
            this.ruleForm.UserRole = value[value.length-1];
            // console.log(this.ruleForm.UserRole);
        },
        //删除
        handleDelete(row){
            // console.log(row);
            if (row.IsDefault === 1) {
                this.$message.error("系统内置用户不可删除");
            } else {
                const paramData = {
                    Header:{
                        CmdCode:"DelSysUser",
                        PageName: "UserMgt"
                    },
                    Data:{
                        UserID: row.UserID
                    },
                    Token:this.$store.state.user.Token
                };
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                    const res = await cfunc(paramData);
                    if (res.Status.StatusCode===0) {
                        this.getData();
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
            // this.$message.error("点击删除");
        },
        // 检测ukey是否插入
        detection(){
            this.getUkey(1);
        },
        //新增or修改
        newUser(status,row){
            // this.getUkey();
            // this.jurisdiction = false;
            if (status === 1) {
                // this.$nextTick(() => {
                //     this.$refs['ruleForm'].resetFields();
                // });
                // this.$data = this.$options.data();
                this.judgeTitle=1;
                this.jurisdiction = false;
                this.fatherDisabled = false;
                this.ruleForm.UserID='';
                this.ruleForm.UserName='';
                this.ruleForm.UserRole='';
                this.ruleForm.Mail='';
                this.ruleForm.Department='';
                this.ruleForm.Phone='';
                this.ruleForm.Wechat='';
                this.ruleForm.Remark='';
                this.ruleForm.LoginWhiteList='';//登录白名单
                this.ruleForm.PwdExpireTime=30; //密码自动过期时间
                this.ruleForm.PwdRetryTimes=3;//密码重置次数
                this.ruleForm.AutoUnlockTime=30;//账户锁定后自动解锁时长
                this.ruleForm.MaxLoginTimes=0;//最多登录次数
                this.ruleForm.UkeyAuth=0;
                this.ruleForm.PolicyStatus=1;
                this.ruleForm.SingleLogin=1;
                this.centerDialogVisible = true;
                this.roleDisable = false;
                this.showBotton = 1;
            } else if(status === 2){
                this.judgeTitle = 2;
                    this.ruleForm = {...row}; //深拷贝row数据
                // if (row.RoleID === "operator" || row.RoleID === 'manager' || row.RoleID === 'auditor') {
                    // this.$message.error("父角色信息不可修改");
                    this.centerDialogVisible = true;
                    this.ruleForm.UserID = row.UserID;
                // }else{
                    this.centerDialogVisible = true;
                    this.showBotton = 2;
                    this.jurisdiction = true;
                    // this.ruleForm.RoleID = row.RoleID;
                    this.ruleForm.UserRole = row.UserRole;
                    // this.data = row.RoleRight;
                // }
                if (row.IsDefault === 1) {
                    this.roleDisable = true;
                }else{
                    this.roleDisable = false;
                }
            }

        },
        // 解锁
        UnlockSysUserClick(row){
            const paramData = {
                Header:{
                    CmdCode:"UnlockSysUser",
                    PageName: "UserMgt"
                },
                Data:{
                    UserID:row.UserID
                },
                Token:this.$store.state.user.Token
            };
            this.$confirm('此操作将解锁用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                const res = await cfunc(paramData);
                if (res.Status.StatusCode===0) {
                    this.getData();
                }
                this.$message({
                    type: 'success',
                    message: '解锁成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 校验邮箱
        verifyEmail(){

        },
        // 还原初始密码
        RevertToDefaultPwdClick(row){
            const paramData = {
                Header:{
                    CmdCode:"RevertToDefaultPwd",
                    PageName: "UserMgt"
                },
                Data:{
                    UserID:row.UserID
                },
                Token:this.$store.state.user.Token
            };
            this.$confirm('此操作将还原用户初始密码, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                const res = await cfunc(paramData);
                if (res.Status.StatusCode===0) {
                    this.getData();
                }
                this.$message({
                    type: 'success',
                    message: '还原用户初始密码成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 取消按钮
        cancelClick(formName){
            this.centerDialogVisible = false;
            this.$refs[formName].resetFields();
        },
        //关闭清空表单
        closeDialog() {
            // 重置表单
            // this.$nextTick(() => {
            this.$refs['ruleForm'].resetFields();
            // });
        },
        handleNodeClick(data) {
            if (data.label==='全部') {
                this.getData('');
            }else{
                this.getData(data.label);
            }
        },
        handleClick(row) {
            // console.log(row);
        },
        tableEdit(row){
            // console.log(row);
        },
        tableDel(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // console.log(row);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 获取用户信息
        async getData(UserRole){
            this.imgTitle = '数据加载中，请稍后......'
            this.tableData = [];
            const paramData = {
                Header:{
                    CmdCode:"GetSysUser",
                    PageName: "UserMgt"
                },
                Filter:{
                    UserRole:UserRole
                },
                Token:this.$store.state.user.Token
            };
            const res = await cfunc(paramData);
            if (res.Status.StatusCode===0) {
                res.Data.map(item=>{
                    item.LoginTime = this.getDateStr(item.LoginTime); //转换登录时间
                    item.LogoutTime = this.getDateStr(item.LogoutTime); //转换登出时间
                    // item.LogoutExpireTime = this.getDateStr(item.LogoutExpireTime);
                    this.$set(item,'UnlockTime',0);
                    if (item.LockStartTime===0) {
                        item.UnlockTime = '当前未锁定';
                    }else{
                        item.UnlockTime = this.getUnlockTime(item.LockStartTime); //转换锁定时间
                    }
                    this.tableData.push(item);
                });
                this.imgTitle = '抱歉，列表暂无数据......';
            }
        },
        // 获取角色树信息
        async getUserTree(){
            const paramData = {
                "Header":{
                    CmdCode:"GetRole",
                    PageName: "RoleMgt"
                },
                Token:this.$store.state.user.Token
            };
            const res = await cfunc(paramData);
            if (res.Status.StatusCode===0) {
                res.Data.map(item=>{
                    // this.$set(item,'RoleID','全部');
                    // item.RoleID.push('全部');
                    if (item.children) {
                        item.children.forEach(newitem => {
                            newitem.label = newitem.RoleID;
                            newitem.value = newitem.RoleID;
                        });
                    }
                    this.selectOption.push({label:item.RoleID,value:item.RoleID,children:item.children});
                    this.data[0].children.push({label:item.RoleID,children:item.children});
                });
                console.log(this.selectOption);
            }
            // console.log(this.data,123123);
        },
        async getUkey(num){
            const paramData = {
                "Header":{
                    CmdCode:"CheckUkeyStatus",
                    PageName: "UserMgt"
                },
                Token:this.$store.state.user.Token
            };
            const res = await cfunc(paramData);
            // console.log(res);
            if (num===1) {
                if (res.Status.StatusCode===0) {
                    MessageBox({
                        title: '提示',
                        showClose: false,
                        closeOnClickModal: false,
                        closeOnPressEscape: false,
                        message: '成功检测到Ukey'
                    });
                    this.dontOpen = false;
                }else{
                    MessageBox({
                        title: '提示',
                        showClose: false,
                        closeOnClickModal: false,
                        closeOnPressEscape: false,
                        message: '未检测到Ukey'
                    });
                    this.dontOpen = true;
                }
            } else {
                if (res.Status.StatusCode===0) {
                    this.dontOpen = false;
                }else{
                    this.dontOpen = true;
                }
            }

        }
    }
};
</script>
<style scoped lang='scss'>
    .el-row {
        // margin-bottom: 20px !important;
        &:last-child {
            margin-bottom: 0;
        }
        .text-header{
            text-align: center;
        }
    }
    ::v-deep.el-card__header{
        border-bottom: 0 !important;
    }
    .el-form-item{
        margin-bottom: 12px !important;
    }
    .switch-class{
        width: 200px !important;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        // background: #e5e9f2;
    }
    // ::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td{
    //     background: #ffffff !important;
    // }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    ::v-deep.el-pagination{
        margin-bottom: 15px !important;
    }
    .demo-table-expand {
        font-size: 0;
    }
    ::v-deep.demo-table-expand label {
        width: 190px;
        color: #99a9bf !important;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50% !important;
    }
    .el-card.is-always-shadow{
        margin-bottom: 20px !important;
    }
    ::v-deep.custom-tree-container{
        width: 380px !important;
    }
    .border-none{
        // ::v-deep.el-card__body{
        //     display: flex !important;
        //     justify-content: space-between !important;
        // }
    }
        // ::v-deep.el-tree-node{
    //     padding: 5px 0 !important;
    // }

    .el-input-number--small{
        width: 220px !important;
    }
    ::v-deep.el-select{
        .el-input{
            width: 100% !important;
        }
    }
    .el-cascader--small{
        width: 100% !important;
    }
    ::v-deep.el-input--small{
        width: 60% !important;
    }
    .inputbox {

        // background-color: white;
        // font-size: 12px;
        // border: 1px solid #dcdee2;
        // border-radius: 6px;
        // margin-bottom: 18px;
        // padding: 0px 1px 1px 6px;
        // text-align: left;
        // font-size: 0;
        // margin-bottom: 0;
    }
    .input {
        font-size: 14px;
        border: none;
        box-shadow: none;
        outline: none;
        background-color: transparent;
        padding: 0;
        margin: 0;
        width: 300px !important;
        max-width: inherit;
        min-width: 150px;
        vertical-align: top;
        height: 30px;
        color: #34495e;
        margin-right: 4px;
        line-height: 30px;
    }
    .arrbox {
        display: flex;
        // flex-direction:row;
        // justify-content: space-between;
        align-items:center;
        flex: 1;
        border-radius: 6px;
        /* margin-bottom: 10px; */
        // padding: 2px 1px 1px 6px;
        text-align: left;
        font-size: 0;
    }
    .spanbox {
        line-height: 30px;
        margin: 2px;
        padding: 0 10px;
        background-color: #1abc9c;
        color: white;
        border-radius: 4px;
        font-size: 13px;
        cursor: pointer;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        overflow: hidden;
        transition: 0.25s linear;
    }
    .spanbox:hover {
        padding: 0px 17px 0 3px;
    }
    .spanclose {
        color: white;
        padding: 0 10px 0 0;
        cursor: pointer;
        font-size: 12px;
        position: absolute;
        right: -3px;
        text-align: right;
        text-decoration: none;
        top: 0;
        width: 100%;
        bottom: 0;
        z-index: 2;
        opacity: 0;
        filter: "alpha(opacity=0)";
        transition: opacity 0.25s linear;
        font-style: normal;
    }
    .spanbox:hover .spanclose {
        padding: 0 10px 5px 0;
        opacity: 1;
        -webkit-filter: none;
        filter: none;
    }
    .spanclose:after {
        content: "x";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 25px;
    }
    .ukey{
        margin-left: 10px;
    }
    .text-hint{
        margin:0;
        color: red;
    }
    ::v-deep.el-tree{
        height: 100% !important;
        overflow-y: auto;
    }
    ::v-deep.tree-line{
        .el-tree-node__content{
            position: relative !important;
            // top: 93.6% !important;
            // margin: 2px 0;
        }
        .el-tree-node {
            position: relative !important;
            padding-left: 16px !important; // 缩进量
        }
        .el-tree-node__children {
            padding-left: 16px !important; // 缩进量
        }

        // 竖线
        .el-tree-node::before {
            content: "" !important;
            height: 100% !important;
            width: 1px !important;
            position: absolute !important;
            left: -3px !important;
            top: -26px !important;
            border-width: 1px !important;
            border-left: 1px dashed #52627C !important;
        }
        // 当前层最后一个节点的竖线高度固定
        .el-tree-node:last-child::before {
            height: 38px !important; // 可以自己调节到合适数值
        }

        // 横线
        .el-tree-node::after {
            content: "" !important;
            width: 24px !important;
            height: 20px !important;
            position: absolute !important;
            left: -3px !important;
            top: 13px !important;
            border-width: 1px !important;
            border-top: 1px dashed #52627C !important;
        }

        // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
        & > .el-tree-node::after {
            border-top: none !important;
        }
        & > .el-tree-node::before {
            border-left: none !important;
        }

        // 展开关闭的icon
        .el-tree-node__expand-icon{
        font-size: 16px !important;
            // 叶子节点（无子节点）
            &.is-leaf{
            color: transparent !important;
            // display: none; // 也可以去掉
            }
        }
    }
    // ::v-deep.el-dialog{
    //     display: flex !important;
    //     flex-direction: column !important;
    //     margin:0 !important;
    //     position:absolute !important;
    //     top:50% !important;
    //     left:50% !important;
    //     transform:translate(-50%,-50%) !important;
    // }
</style>
